<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

  </style>
</head>
<body>
  
  <style>
    /* 
      id ： id选择器
    */
    #box{
      color: red;
    }
  </style>
  <div id="box">id选择器</div>

  <style>
    /* 
      class : 类选择器，.(点)表示class
    */
    .box{
      color: pink;
    }
  </style>
  <div class="box">类选择器</div>

  <!-- 
    css类规范命名 
  -->
  <div class="header"></div><!-- 头部 -->
  <div class="footer"></div><!-- 脚部 -->
  <div class="main"></div><!-- 主体 -->
  <div class="aside"></div><!-- 侧边栏 -->
  <div class="menu"></div><!-- 菜单 -->
  <div class="nav"></div><!-- 导航栏 -->
  <div class="logo"></div><!-- 标志 -->
  <div class="login"></div><!-- 登录 -->
  <div class="search"></div><!--搜索 -->
  <!-- 容器命名 -->
  <div class="app"></div>
  <div class="container"></div>
  <div class="wrapper"></div>


  <style>
    /* 
      标签选择器： 匹配对应标签的元素
    */
    a{
      text-decoration: none;
      color: khaki;
    }
  </style>
  <a href="#">链接跳转</a>



  
  <style>
    /* 
      属性选择器：
        语法：
          [属性="属性值"] {
            //css
          }


          // ^表示属性值以xx开头
          [属性^="属性值"]{
             
          }


          // $表示属性值以xx结尾
          [属性$="属性值"]{
             
          }

          //*表示属性值包含xxx
          [属性$="属性值"]{
             
          }
    */
    [name="user"]{
      color: orange;
    }
    [name^="a"]{
      color: yellowgreen;
    }
    [name$="m"]{
      color: yellow;
    }
    [name*="m"]{
      background-color: bisque;
    }
  </style>
  <div name="user">属性选择器</div>
  <div name="admin">^匹配属性的属性值以xx开头的元素</div>
  <div name="system">$匹配属性的属性值以xx结尾的元素</div>


  <style>
    /* 
        通配符选择器 ,表示匹配所有元素，慎用，性能开销特别大
          语法：  
              *{

              }
    */
      *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
  </style>

  <style>
    /* 
      层级选择器：
          // 匹配的是直接子元素
          父 >  直接子选择器{
             //
          }

          // 匹配的是父元素内部的后代元素
          父  (空格)  后代元素{

          }
    */
    .box2 > .box3{
      color: palegreen;
    }
    .box2 .box3{
      background-color: #ccc;
    }
  </style>
  <div class="box2">
    <div class="box3">子元素</div>
    <div class="bo4">
      <div class="box3">后代元素</div>
    </div>
  </div>


  <style>
    /* 
      同辈元素 + 紧相邻下一个元素{

      }
    */

    .box5 > .text + span{
      color: red;
    }

    /* 
      同辈元素 ~ 紧相邻下所有元素{

      }
    */
    .box5 > .text ~ span{
      color: orangered;
    }
  </style>

<div class="box5">
  <span>1</span>
  <span class="text">text</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
</div>


<style>
  /* 
      选择器1,选择器2,...,选择器n{
        //需要共享的样式
      }
  */
  h1,h2,h3,p,body,ul,ol{
    margin: 0;
  }
</style>
 
<h1>一级标题</h1>




</body>
</html>